<template>
	<view>
		<view class="vf-upimg-box" v-if="type == 'all'">
			<view class="vf-upimg" v-for="(item, index) in max" :key="index" @click="sele(index)" :style="imgStyle">
				<template v-if="images[index]">
					<view class="mask" v-if="images[index].load == 'ing'">
						上传中...
					</view>
					<view class="mask" v-else-if="images[index].load == 'err'">
						上传失败！
					</view>
					<image class="image" v-if="images[index].localSrc" :src="images[index].localSrc" mode="aspectFill"></image>
					<!-- <image src="/static/close3.png" mode="scaleToFill" class="close" @click.stop="del(index)"></image> -->
					<view class="close" @click.stop="del(index)">
						<uni-icons type="close" color="red" size="44"></uni-icons>
					</view>
				</template>
				<view class="add" v-if="!images[index] || !images[index].localSrc">+</view>
			</view>
		</view>

		<view class="vf-upimg-box" v-else-if="type == 'add'">
			<view class="vf-upimg" v-for="(item, index) in images" :key="index" @click="sele(index)" :style="imgStyle">
				<view class="mask" v-if="images[index].load == 'ing'">
					上传中...
				</view>
				<view class="mask" v-else-if="images[index].load == 'err'">
					上传失败！
				</view>
				<image class="image" v-if="images[index].localSrc" :src="images[index].localSrc" mode="aspectFill"></image>
				<!-- <image src="/static/close3.png" mode="scaleToFill" class="close" @click.stop="del1(index)"></image> -->
				<view class="close" @click.stop="del1(index)">
					<uni-icons type="close" color="red" size="44"></uni-icons>
				</view>
			</view>
			<view class="vf-upimg" @click="sele(null)" v-if="images.length < max" :style="imgStyle">
				<view class="add">+</view>
			</view>
		</view>



		<avatar v-if="crop" @upload="upload" quality="1" ref="avatar"></avatar>
	</view>
</template>

<script>
	// import avatar from "@/components/other/yq-avatar/yq-avatar.vue";
	import avatar from "@/components/other/yq-avatar/yq-avatar.vue";
	import { mapActions } from 'vuex';
	export default {
		components:{
			avatar
		},
		props:{
			max: {
				type: Number,
				default: 1
			},
			type: {   // add || all
				type: String,
				default: 'add'
			},
			crop: {   // 是否裁剪
				type: Boolean,
				default: false
			},
			imgStyle: {
				type: String,
				default: ''
			},
			cropStyle: {
				type: Object,
				default() {
					return {
						width: 750,
						height: 1000
					}
				}
			}
		},
		data() {
			return {
				images: []
			};
		},
		methods:{
    	...mapActions(['seleImg' , 'upImg']),
			sele(index) {
				if(this.crop) {
					let w = this.cropStyle.width;
					let h = this.cropStyle.height;
					this.$refs.avatar.fChooseImg(index,{
						selWidth: w + 'rpx', selHeight: h + 'rpx',
						expWidth: w + 'px', expHeight: h + 'px',
						inner: index ? 'true' : 'false',
						canRotate: 'false',
						stretch:'short'
					});
				} else {
					this.upload(index);
				}
			},
			async upload(rsp) {
				let index;
				if(this.crop) {
					index = rsp.index;
				} else {
					index = rsp;
				}

				if(index === null) index = this.images.length;
				if(!this.images[index]) this.images[index] = {};

				let path;
				if(this.crop) {
					path = rsp.path;
				} else {
					let paths = await this.seleImg();
					console.log(paths)
					path = paths[0];
				}
				this.images[index].localSrc = path;
				this.images[index].load = 'ing';
				this.$nextTick(function(){
					this.$forceUpdate();
				})
				console.log('本地图片：' + path);
				this.upImg(path).then(res => {
					console.log('网络图片：' + res)
					if(res) {
						this.images[index].load = 'ok';
						this.images[index].src = res;
					} else {
						this.images[index].load = 'err';
					}
					this.$nextTick(function(){
						this.$forceUpdate();
					})
				}).catch(err => {
					console.log(err)
					this.images[index].load = 'err';
					this.$nextTick(function(){
						this.$forceUpdate();
					})
				})

			},
			del(index) {
				this.images[index] = null;
				this.$nextTick(function(){
					this.$forceUpdate();
				})
			},
			del1(index) {
				this.images.splice(index, 1);
				this.$nextTick(function(){
					this.$forceUpdate();
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.vf-upimg{
	width: 200upx;
	height: 200upx;
	position: relative;
	box-shadow: 0 0 4upx #ccc;
	display: inline-block;
	margin: 10upx;
	font-size: 26rpx;
	.mask{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.3);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}
	.image{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.close{
		width: 44rpx;
		height: 44rpx;
		position: absolute;
		top: -16rpx;
		right: -16rpx;
		z-index: 3;
	}
	.add{
		width: 100%;
		height: 100%;
		font-size: 120upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ccc;
		position: absolute;
		top: 0;
		left: 0;
	}
}
</style>
